<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li
      v-for="item in change"
      :key="item.id"
      :id="item.id"
       @change="onCheckedChange($event,item.id)"
      :class="{
        completed: item.done,
      }"
    >
      <div class="view">
        <input
          :checked="item.done"
         
          class="toggle"
          type="checkbox"
        />
        <label>{{ item.task }}</label>
        <button @click="delClick(item.id)" class="destroy"></button>
      </div>
    </li>
  </ul>
</template>

<script>
// 按需导入辅助函数
import { mapState,mapGetters } from "vuex";
// console.log(mapState("todo", ["list"]));
export default {
  props:{},
  data() {
    return {
     
    };
  },
  computed: {
    ...mapGetters("todo",['change']),
    ...mapState("todo", ["list"]),
  },
  methods: {
    // 第一个参数传的是事件对象,第二个参数是用的时间委托传的当前的id
    onCheckedChange(e,id) {
      this.$emit("stateChange", {
        id: id,
        value: e.target.checked,
      });
    },
    delClick(id){
      this.$store.commit("todo/delState",{
        id
      })
    }
  },
};
</script>